<template>
	<view class="container">
		<view class="address-form">
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">联系人</view>
					<input type="text" v-model="form.AddrUserName" placeholder="请填写收货人的姓名" placeholder-class="placeholder" />
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">性别</view>
					<view class="radio" @tap="form.AddrGender = !form.AddrGender">
						<image :src="form.AddrGender ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>先生</view>
					</view>
					<view class="radio" @tap="form.AddrGender = !form.AddrGender">
						<image :src="!form.AddrGender ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>女士</view>
					</view>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">手机号</view>
					<input type="text" v-model="form.AddrPhone" placeholder="请填写收货手机号码" placeholder-class="placeholder" />
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">收货地址</view>
					<input type="text" @tap="chooseLocation" v-model="form.Address" placeholder="点击选择" placeholder-class="placeholder" />
					<image src="/static/images/common/icon_jump_black3.png" class="jump-icon"></image>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">门牌号</view>
					<input type="text" v-model="form.AddrDescription" placeholder="例:B座6楼606室" placeholder-class="placeholder" />
				</view>
			</list-cell>

			<list-cell padding="30rpx" last>
				<view class="form-item">
					<view class="radio" @tap="form.AddrIs_default = !form.AddrIs_default">
						<image :src="!form.AddrIs_default ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>设为默认地址</view>
					</view>
				</view>
			</list-cell>
		</view>

		<view class="save-btn">
			<button type="info" @click="saveAddress()">保存</button>
		</view>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'

	export default {
		components: {
			listCell
		},
		data() {
			return {
				action:'UI_Add',
				form: {
					AddrUserName: '',
					AddrGender: 0,
					AddrPhone: '',
					AddrDescription: '',
					AddrIs_default: 0,
					AddrComplete_address: '',
					Address: '',
					AddrLatitude: '',
					AddrLongitude: '',
					AddrCoId: 0,
					AddrDelFlag: 0
				}
			}
		},
		onLoad({
			editForm
		}) {
			if (editForm) {
				this.action="UI_Update";
				this.form = JSON.parse(editForm) ;
			}
		},
		methods: {
			saveAddress() {
				let that = this;
				that.form.AddrCoId = uni.getStorageSync('WxId');

				let cateOp = {
					url: `api/Lx_Self_Addresses/${this.action}`,
					data: {
						mainData: that.form,
						detailData: null,
						delKeys: null
					}
				}

				this.$request.Post(cateOp, (ret) => {
					if (ret.code == "311") {
						uni.showModal({
							title: '提示',
							content:that.action=="UI_Add"? '添加成功':'修改成功',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									that.togoPage('/pages/addresses/addresses');
								} else {
									console.log('else', res)
								}
							}
						});
					}
				});
			},
			togoPage(url){
				uni.navigateTo({
					url: url
				})
			},
			chooseLocation() {
				uni.chooseLocation({
					success: res => {
						const {
							errMsg,
							address,
							latitude,
							longitude,
							name
						} = res
						if (errMsg === "chooseLocation:ok") {
							this.form = Object.assign(
								this.form, {
									AddrComplete_address: address,
									AddrLatitude:latitude,
									AddrLongitude:longitude,
									Address: name
								},
							)
						}
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.address-form {
		margin-top: 20rpx;

		.form-item {
			width: 100%;
			display: flex;
			align-items: center;

			.label {
				width: 160rpx;
			}

			input {
				flex: 1;
			}

			.jump-icon {
				width: 30rpx;
				height: 48rpx;
			}

			.radio {
				display: flex;
				margin-right: 50rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.save-btn {
		padding: 0 30rpx;
		margin-top: 60rpx;

		button {
			width: 100%;
			font-size: $font-size-extra-lg;
		}
	}
</style>
